<template>
    <div class="user-credit-report-detail" ref='box'>
        <template v-if='hasDetail'>
            <div class="loan-detail-header">
                <div class="loan-detail-number">
                    <p class="loan-detail-number__number">报告编号: {{detail.creditReport.creditReportNo}}</p>
                    <span class="loan-detail-number__status purple">{{detail.creditReport.statusStr}}</span>
                </div>
                <div class="loan-detail-user">
                    <span class="loan-detail-user__avatar"><img :src="detail.user.avatar || placeholderImg" alt=""></span>
                    <div class="loan-detail-user__info">
                        <p class='name'>{{detail.user.realName}}</p>
                    </div>
                    <span class="button short transparent" @click='goUserCreditReportList' v-if='number == "default"'>更新报告</span>
                </div>
            </div>
            <div class="tips">
                <p>最近更新: {{detail.creditReport.modifyTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                <p>有借为您的信息提供安全加密，保障用户信息安全</p>
            </div>
            <div class="big-title">认证项目</div>
            <ul class="report-auth-list">
                <li class="report-auth__item" v-for='item in authList' :class='{"no-auth":item.state != "SUCCESS"}'>
                    <div class="box">{{item.typeStr}}</div>
                </li>
            </ul>
            <div class="big-title" v-if='baseInfo'>基本信息</div>
            <div class="report-project" v-if='baseInfo'>
                <ul class="report-project__base-info">
                    <li class="report-project__item">
                        <span>姓名</span>
                        <p class='text-right'>{{baseInfo.name || placeholder}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>性别</span>
                        <p class='text-right'>{{baseInfo.idNumber_gender || placeholder}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>年龄</span>
                        <p class='text-right'>{{baseInfo.idNumber_age || placeholder}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>身份证号</span>
                        <p class='text-right'>{{baseInfo.idNumber | idNumber}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>手机号</span>
                        <p class='text-right'>{{baseInfo.mobile | mobile}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>设备型号</span>
                        <p class='text-right'>{{baseInfo.device || placeholder}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>微信号</span>
                        <p class='text-right'>{{baseInfo.weixinNo | toStar(2)}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>现居住地</span>
                        <p class='text-right'>
                            {{baseInfo.province || placeholder}}
                            {{baseInfo.city || placeholder}}
                            {{baseInfo.address | toStar}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>身份证归属地</span>
                        <p class='text-right'>{{baseInfo.idNumber_province | toStar(2)}}</p>
                    </li>
                </ul>
            </div>
            <div class="big-title" v-if='loan'>
                <p>借贷记录<small>(含服务费和手续费)</small></p>
                <span>数据源于有借</span>
            </div>
            <div class="report-project" v-if='loan'>
                <div class="report-project__title">
                    <span></span>
                    <span>借入</span>
                    <span>借出</span>
                </div>
                <ul class="report-project__content">
                    <li class="report-project__item">
                        <span>累计金额</span>
                        <p>{{loan.borrowAmount | toYuan}}</p>
                        <p>{{loan.lendAmount | toYuan}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>累计笔数</span>
                        <p>{{loan.borrowCount}}</p>
                        <p>{{loan.lendCount}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>累计人数</span>
                        <p>{{loan.borrowUserCount}}</p>
                        <p>{{loan.lendUserCount}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>当前金额</span>
                        <p>{{loan.currentBorrowAmount | toYuan}}</p>
                        <p>{{loan.currentLendAmount | toYuan}}</p>
                    </li>
                </ul>
            </div>
            <div class="big-title" v-if='overdue'>
                <p>逾期记录</p>
                <span>数据源于有借</span>
            </div>
            <div class="report-project" v-if='overdue'>
                <div class="report-project__title">
                    <span>类型</span>
                    <span>金额</span>
                    <span>次数</span>
                </div>
                <ul class="report-project__content">
                    <li class="report-project__item">
                        <span>累计逾期</span>
                        <p>{{overdue.overdueAmount | toYuan}}</p>
                        <p>{{overdue.overdueCount}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>>7天逾期</span>
                        <p>{{overdue.days7OverdueAmount | toYuan}}</p>
                        <p>{{overdue.days7OverdueCount}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>当前逾期</span>
                        <p>{{overdue.currentOverdueAmount | toYuan}}</p>
                        <p>{{overdue.currentOverdueCount}}</p>
                    </li>
                    <li class="report-project__item">
                        <span>逾期占比</span>
                        <p>{{overdue.overdueAmountPercent}}%</p>
                        <p>{{overdue.overdueCountPercent}}%</p>
                    </li>
                </ul>
            </div>
            <div class="report-project single" v-if='zmxy'>
                <div class="report-project__title">
                    <span>芝麻信用分</span>
                    <p class='import-color'>{{zmxy}}</p>
                </div>
            </div>
            <div class="report-project single" v-if='carrier && carrier.zmLevelStr'>
                <div class="report-project__title">
                    <span>信用风险(来自芝麻信用，仅供参考)</span>
                    <p class='import-color'>{{carrier.zmLevelStr}}</p>
                </div>
            </div>
            <div class="report-project" v-if='baseInfo'>
                <toggle :show='true'>
                    <div class="report-project__title" slot='header'>
                        <span>紧急联系人</span>
                        <div class="toggle-icon"><i class='iconfont icon-arrow'></i></div>
                    </div>
                    <ul class="report-project__content" slot='content'>
                        <li class="report-project__item ">
                            <span>姓名</span>
                            <p>{{baseInfo.contact1Name | toStar(1)}}</p>
                            <p>{{baseInfo.contact2Name | toStar(1)}}</p>
                        </li>
                        <li class="report-project__item">
                            <span>与本人关系</span>
                            <p>{{baseInfo.contact1Relation}}</p>
                            <p>{{baseInfo.contact2Relation}}</p>
                        </li>
                        <li class="report-project__item">
                            <span>联系方式</span>
                            <p>{{baseInfo.contact1Mobile | mobile}}</p>
                            <p>{{baseInfo.contact2Mobile | mobile}}</p>
                        </li>
                        <li class="report-project__item">
                            <span>半年内通话</span>
                            <p>{{baseInfo.contact1CallCount || placeholder}}</p>
                            <p>{{baseInfo.contact2CallCount || placeholder }}</p>
                        </li>
                    </ul>
                </toggle>
            </div>
            
            <div class="report-project">
                <toggle>
                    <div class="report-project__title" slot='header'>
                        <span>运营商风险排查项目</span>
                        <div class="report-project__title-right" v-if='carrier'>
                            <div class="toggle-icon"><i class='iconfont icon-arrow'></i></div>
                        </div>
                        <div class="report-project__title-right" v-else>
                            <p class='font-caption'>稍后显示</p>
                        </div>
                    </div>
                    <template v-if='carrier'>
                        <ul class="report-project__content" slot='content'>
                            <li class="report-project__item two yys">
                                <span>实名认证手机号</span>
                                <p style='width:13em'>{{carrier.phone | mobile}}</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>手机号在网时长</span>
                                <p>{{carrier.onLineDays}}天</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>手机号活跃天数</span>
                                <p>{{carrier.activeDays}}天</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>通话主要活动区域</span>
                                <p>{{carrier.mainArea || placeholder}}</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>互通电话号码数</span>
                                <p>{{carrier.callPhoneCount}}</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>身份证是否在信贷行业逾期名单中</span>
                                <p>{{carrier.idNumberInLoanBlacklist | booleanToStr}}</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>手机是否在信贷行业逾期名单中</span>
                                <p>{{carrier.mobileInLoanBlacklist | booleanToStr}}</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>身份证是否在法院失信名单中</span>
                                <p>{{carrier.idNumberInLawBlacklist | booleanToStr}}</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>用户信息姓名与身份证号是否匹配</span>
                                <p>{{carrier.phone | booleanToStr}}</p>
                            </li>
                            <li class="report-project__item two yys">
                                <span>用户信息与手机号实名信息是否匹配</span>
                                <p>{{carrier.idNumberMatch | booleanToStr}}</p>
                            </li>
                            <li class="report-project__item two yys" v-if='detail.data.CARRIER.impl == "RONG360"'>
                                <span>贷款类号码通话情况</span>
                                <p>{{carrier.hasLoanCall | booleanToStr2}}</p>
                            </li>
                            <li class="report-project__item two yys" v-if='detail.data.CARRIER.impl == "RONG360"'>
                                <span>催收类号码通话情况</span>
                                <p>{{carrier.hasRemindCall | booleanToStr2}}</p>
                            </li>
                        </ul>
                    </template>
                </toggle>
            </div>
            <div class="report-project">
                <toggle>
                    <div class="report-project__title" slot='header'>
                        <span>电商消费分析</span>
                        <div class="report-project__title-right" v-if='ec'>
                            <p class='font-caption'>数据源于京东</p><div class="toggle-icon"><i class='iconfont icon-arrow'></i></div>
                        </div>
                        <div class="report-project__title-right" v-else>
                            <p class='font-caption'>稍后显示</p>
                        </div>
                    </div>
                    <template v-if='ec'>
                        <ul class="report-project__content" slot='content'>
                            <li class="report-project__item two">
                                <span >真实姓名</span>
                                <p>{{ec.realName | toStar(1)}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>手机号</span>
                                <p>{{ec.mobileNo}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>证件号码</span>
                                <p>{{ec.idCard}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>收货信息</span>
                                <p>
                                    <em v-if='ec.address' v-for='item in ec.address'>{{item | toStar(8)}}</em>
                                </p>
                            </li>
                            <li class="report-project__item two">
                                <span>会员等级</span>
                                <p>{{ec.vipLevel}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>安全等级</span>
                                <p>{{ec.securityLevel}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>京东白条</span>
                                <p>{{ec.isOpen | booleanToStr}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>白条总额度</span>
                                <p>{{ec.creditlimit || placeholder}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>可用额度</span>
                                <p>{{ec.availablelimit || placeholder}}</p>
                            </li>
                            <li class="report-project__item split">
                                <span>近半年情况：</span>
                            </li>
                            <li class="report-project__item two">
                                <span>累计消费</span>
                                <p>{{ec.totalOrderMoney}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>订单数</span>
                                <p>{{ec.orderCount}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>单笔最高消费</span>
                                <p>{{ec.maxOrderMoney}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>每笔平均消费</span>
                                <p>{{ec.avgOrderMoney}}</p>
                            </li>
                            <li class="report-project__item two">
                                <span>商品总数</span>
                                <p>{{ec.goodsCount}}</p>
                            </li>
                        </ul>
                    </template>
                </toggle>
            </div>
        </template>

        <modal 
            :show='show_warning'
            :maskClose='false'>
            <div class="modal-bind-card-warning">
                <p>感谢您选择有借，基于风控考虑，在有借进行借款／出借业务的用户，须年满22周岁。为您带来不便，请谅解。</p>
                <div class="modal-bind-card__button"><span @click='show_warning = false'>关闭</span></div>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import toggle from '../components/Toggle.vue'
    import toYuan from '../filters/filter-toYuan'
    import toStar from '../filters/filter-toStar'
    import mobile from '../filters/filter-mobile'
    import dateFormat from '../filters/filter-dateFormat'
    import idNumber from '../filters/filter-idNumber'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { reportApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab,
            toggle
        },
        filters:{
            toYuan,
            mobile,
            dateFormat,
            idNumber,
            toStar,
            booleanToStr(boolean){
                if(boolean) return '是'

                return '否'
            },
            booleanToStr2(boolean){
                if(boolean) return '有'

                return '无'
            }
        },
        data() {
            return {
                number:this.$route.params.no,
                placeholderImg:require('../images/loading_1.png'),
                placeholder:'--',
                tabIndex:0,
                show_warning:false,
                authList:[],
                rechargeMoney:'',
                show_modal_loan_detail:false,
                argeement:true,
                payway:-1,
                showDetail:false,
                payPasswordShow:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                detail:{},
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasDetail(){
                return !_.isEmpty(this.detail)
            },
            baseInfo(){
                if(this.hasDetail){
                    return this.detail.data.USER_INFO.analyze
                }
            },
            loan(){
                if(this.hasDetail){
                    return this.detail.loan
                }
            },
            overdue(){
                if(this.hasDetail){
                    return this.detail.overdue
                }
            },
            zmxy(){
                if(this.hasDetail){
                    return this.detail.data.CREDIT.analyze && this.detail.data.CREDIT.analyze.zmScore
                }
            },
            ec(){
                if(this.hasDetail){
                    return this.detail.data.EC.analyze
                }
            },
            carrier(){
                if(this.hasDetail){
                    return this.detail.data.CARRIER.analyze
                }
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setGoHome'
            ]),
            // function

            goUserCreditReportList(){
                this.$router.push({
                    name:'user-credit-report-list'
                })
            },

            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            withDrawAll(){
                this.withDrawMoney = 600
            },
            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getAccount(){
                this.loading_count = true
                allApi.userCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
            getDetail(params){
                this.showLoading()
                reportApi.detail(params)
                .then(result=>{
                    this.detail = result
                    this.authList = result.infoList
                    this.zmxy = result.data.CREDIT
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        created(){

            let no = this.$route.params.no
            let params
            if(no == 'default'){
                params = {}
            }
            else{
                params = {
                    creditReportNo : this.$route.params.no
                }
            }
            this.setGoHome(true)
            this.getDetail(params)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-credit-report-detail{
        // transform: translate3d(0,0,0);
        .loan-detail-header{
            padding-bottom:0;
        }
        .loan-detail-user{
            margin-bottom: 0;
            &:after{
                display: none;
            }
        }
        .tips{
            @extend %font-caption;
            text-align: center;
            padding:4px 0 8px 0;
            p{
                padding-top:4px
            }
        }
        .report-auth-list{
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
            overflow:auto;
            padding:20px 0;
            margin-bottom:8px;
        }
        .report-auth__item{
            width:(1/3)*100%;
            display: flex;
            justify-content: center;
            padding:4px;
            box-sizing: border-box;
            &.no-auth{
                .box{
                    background:#E0E0E0;
                }
            }
            .box{
                width: 80px;
                box-sizing: border-box;
                text-align: center;
                padding:5px 0;
                color:#fff;
                background-color: $purple;
                border-radius:16px;
            }
        }
        .report-project{
            background-color: #fff;
            padding:0px 24px 0 24px;
            margin-bottom:16px;
            &.single{
                padding-bottom:0;
            }
            .component-toggle.show{
                .toggle-icon{
                    display: flex;
                    align-items:center;
                    transform:rotate(180deg);
                }
            }
        }
        .report-project__title{
            display: flex;
            height:48px;
            align-items:center;
            background-color:#fff;
            justify-content: space-between;
            @extend %font-body1;
            span{
                width: 30%;
                flex:1;
                display: block;
                text-align: center;
                padding:12px 0;
                &:first-child{
                    text-align: left;
                    @extend %font-body2;
                }
            }
            .icon-arrow{
                display: block;
                transform:rotate(90deg);
            }
            .import-color{
                color:$importColor;
            }
        }
        .report-project__title-right{
            display: flex;
            align-items:center;
            .font-caption{
                padding-right:8px;
            }
        }
        .report-project__content{
            padding-top:12px;
            padding-bottom:16px;
            border-top:1px solid $sectionColor;
            &.no-border{
                border-top:1;
            }
        }
        .report-project__base-info{
            padding-top:8px;
            padding-bottom:16px;
        }
        .report-project__item{
            display: flex;
            justify-content: space-between;
            @extend %font-body1;
            &.split{
                border-top: 1px solid $sectionColor;
                span{
                    font-weight: normal;
                    color:$importColor;
                }
            }
            &.two{
                span{
                    flex:none;
                    width: 8em;
                }
                p{
                    text-align: right;
                }
                &.yys{
                    span{
                        flex:1;
                    }
                    p{
                        width: 20%;
                        flex:none;
                        text-align: right;
                    }
                }
            }
            span{
                width: 30%;
                flex:1;
                text-align: left;
                display: block;
                padding:4px 0;
            }
            p{
                color:$importColor;
                width: 30%;
                flex:1;
                text-align: center;
                padding:4px 0;
                &.text-right{
                    text-align:right;
                }
                em{
                    display: block;
                }
            }
        }
    }

</style>
